﻿<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Basic Layout - jQuery EasyUI Demo</title>  

    <link rel="stylesheet" type="text/css" href="/pfw/jquery/easyui/themes/default/easyui.css">  
    <link rel="stylesheet" type="text/css" href="/pfw/jquery/easyui/themes/icon.css">  
    <link rel="stylesheet" type="text/css" href="/pfw/jquery/easyui/themes/demo/demo.css">  
    <script type="text/javascript" src="/pfw/jquery/jquery-1.9.1.min.js"></script>  
    <script type="text/javascript" src="/pfw/jquery/jquery-migrate-1.1.1.js"></script>
    <script type="text/javascript" src="/pfw/jquery/jquery.form.js"></script>  
    <script type="text/javascript" src="/pfw/jquery/easyui/jquery.easyui.min.js"></script></head>  
<body>  
  
    <div class="easyui-layout" align=center style="width:100%;height:590px;overflow:hidden">  
        <div data-options="region:'north'" style="height:50px">  
        
        <div style="padding:5px;border:1px solid #ddd">  
        <a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>  
        <a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit阿德发达</a>  
        <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Help</a>  
        <a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">About</a>  
    </div>
        </div>

            
        
        <div data-options="region:'center',iconCls:'icon-ok'">  
            <div id="tab_panel" class="easyui-tabs" style="width:1200px;height:530px">  
        <div title="About" style="padding:10px">  
            <iframe src="/test1.html" style="width:100%;height:80%"></iframe>  
        </div>  
        <div title="My Documents" style="padding:10px">  
          
        </div>  
        <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">  
            This is the help content.  
        </div>  
     </div>  
        </div>  
    </div>  
    <div id="mm1" style="width:150px;">  
        <div data-options="iconCls:'icon-undo'">Undo</div>  
        <div data-options="iconCls:'icon-redo'">Redo</div>  
        <div class="menu-sep"></div>  
        <div>Cut</div>  
        <div onclick="add();">Copy</div>  
        <div>Paste</div>  
        <div class="menu-sep"></div>  
        <div>  
            <span>Toolbar</span>  
            <div style="width:150px;">  
                <div>Address</div>  
                <div>Link</div>  
                <div>Navigation Toolbar</div>  
                <div>Bookmark Toolbar</div>  
                <div class="menu-sep"></div>  
                <div>New Toolbar...</div>  
            </div>  
        </div>  
        <div data-options="iconCls:'icon-remove'">Delete</div>  
        <div>Select All</div>  
    </div>  
    <div style="clear:both;"></div> 
</body>  
</html>
<script>

        function tabAdd(tabPanel,id,title,url){
             //如果存在，则当前激活
             var tab = $('#'+id);
             if (tab.length > 0) {
                 var index = tabPanel.tabs('getTabIndex',tab);
                 tabPanel.tabs('select',index);
                 return;
             }
             tabPanel.tabs('add',{                                                                                                       
		            	id:'tab_baidu',
		                title: title,                                                                                                     
		                content: '<div style="padding:5px"><iframe src="'+url+'" style="width:100%;height:100%"/></div>',                                                            		               
		                closable: true                                                                                                          
		            }); 
        }
	function add(){                  
		
	     tabAdd($('#tab_panel'),'tab_baidu','百度','http://www.baidu.com');	
	     
                                                                                                                         
        } 
</script>